<style lang="less">
@import "./less/login.less";
.login {
    display: flex;
    flex-direction: column;
    height: 100%;
    .login-header {
        height: 100px;
        background: #fff;
        img {
            margin-top: 25px;
            height: 38px;
        }
    }
    .login-body {
        flex: 1;
        //background-color: #c9c9c9;
        background: url(~@/assets/images/login_body_bg.png) no-repeat
            center;
        min-height: 400px;
    }
    .login-footer {
        height: 100px;
        background: #fff;
    }
    .w {
        .wr{
    position: absolute;
    right:100px;
    top:30px;
    font-size: 16px;
    }

        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .login-img {
            width: 627px;
            height: 411px;
            position: absolute;
            left: 0;
            top: 200px;
            &:before {
                content: "";
                width: 480px;
                height: 48px;
                position: absolute;
                left: 150px;
                top: -66px;
                background: url(~@/assets/images/slogan.png) no-repeat;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        .login-con {
            right: 100px;
        }
    }
}
@media screen and (max-width: 1440px) {
    .login {
        .w {
            .wr{
    position: absolute;
    right:150px;
    top:30px;
    font-size: 16px;
    }
            position: relative;
            .login-img {
                width: 445px;
                height: 292px;
                top: 120px;
                left: 150px;
                &::before {
                    left: 70px;
                    top: -60px;
                }
            }
            .login-con {
                right: 150px;
                &::before {
                    display: none;
                    width: 92px;
                    height: 56px;
                    background-size: contain;
                    right: 0px;
                    top: -100px;
                }
            }
        }
    }
}
</style>

<template>
    <div class="login">
        <div class="login-header">
            <div class="w">
                <img src="~@/assets/images/e_logo2.png" alt="" />
                <a class="wr" href="http://zlfw.emt.szhtxx.com/login" target="_blank">企业版入口</a>
            </div>
        </div>
        <div class="login-body">
            <div class="w">
                <div class="login-img">
                    <img src="~@/assets/images/login_img.png" alt="" />
                </div>
                <div class="login-con">
                    <Card icon="log-in" title="欢迎登录" :bordered="false">
                        <div class="form-con">
                            <login-form
                                @on-success-valid="handleSubmit"
                            ></login-form>
                        </div>
                    </Card>
                </div>
            </div>
        </div>
        <div class="login-footer"></div>
    </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapMutations, mapActions } from 'vuex'
import clearToken from '@/libs/clearToken.js'
import { getHomeRouteByRole, clearAllStorage } from '@/libs/util'
import { getPermission } from '@/libs/permission'
import routers from '@/router/routers'

export default {
    components: {
        LoginForm
    },
    mounted () {
        clearToken()
    },
    methods: {
        ...mapActions(['handleLogin']),
        ...mapMutations(['setHomeRoute']),
        handleSubmit (data) {
            if (this.sbLoading) return
            this.sbLoading = true
            this.$Loading.start()
            clearAllStorage()
            this.handleLogin(data)
                .then(pres => {
                    if (pres.data.code === '0000') {
                        // 设置首页
                        const role = pres.data.data.roleType
                        const list = getPermission(role)
                        const route = getHomeRouteByRole(list, routers)
                        this.setHomeRoute(route)
                        // 跳转home页面
                        if (JSON.parse(localStorage.userinfo).roleType == 4) {
                            this.$router.push({
                                name: 'studentHome'
                            })
                        } else {
                            this.$router.push({
                                name: route.name
                            })
                        }
                    } else {
                        this.$Message.error(pres.data.data || pres.data.msg)
                        this.sbLoading = false
                        this.$Loading.error()
                    }
                })
                .catch(perr => {
                    this.sbLoading = false
                    this.$Loading.error()
                })
        }
    }
}
</script>
